<template>
    <div class="community_box">
        <div class="label" @click = "look_blog(data.id)">{{ data.label }}</div>
        <div class="abstract">{{ data.abstract }}</div>
        <div class="article-info-box">
            <div
                class="like"
                @mouseover.stop="change_image"
                @mouseleave.stop="reset_image"
                @click.stop="click_image">
                <img :src="url_data[like_url]" /><span :class="active"
                    >{{ data.like_number }}赞</span
                >
            </div>
            <div class="time">
                <span>发布时间：{{ time_str }}</span>
            </div>
            <!-- <div class="browse">
                <span>浏览量：{{ 30 }}</span>
            </div> -->
            <div class="lable_class">
                <span v-for="item in data.class_list" :key="item.id">{{ item.class_label }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,computed } from 'vue';
import { useIndexStore } from '@/store/model/index';
import { el_message } from '@/utils/el_message';
import { get_now_time } from '@/utils/utils.js';
import { useRouter } from 'vue-router'
import { add_drop_like,delete_drop_like } from '@/axios/home/index.js';

const store = useIndexStore();
const router = useRouter()

const {data,is_like} = defineProps({
    data: {
        type: Object,
        default: {},
    },
    is_like: {
        type: Boolean,
        default: false,
    },
});

const url_data = {
    normal: require('@/assets/img/normal.png'),
    hover: require('@/assets/img/hover.png'),
    click: require('@/assets/img/click.png'),
};
const like_url = ref( is_like?'click':'normal' );
const active = ref(null);

const time_str = computed(() => {
    return get_now_time(data.storage_time);
});

const change_image = () => {
    // 鼠标悬浮
    if (like_url.value === 'click') {
        return;
    }
    like_url.value = 'hover';
    active.value = 'hover';
};
const reset_image = () => {
    // 鼠标离开
    if (like_url.value === 'click') {
        return;
    }
    like_url.value = 'normal';
    active.value = '';
};
const click_image = async () => {
    // 判断是否登录，只有登录后才能点赞
    if (!store.user_info.user_id) {
        el_message('请登录以后在点赞!', 'warning');
        return;
    }
    // 鼠标点击
    // 如果是被点赞了，就取消点赞
    if (like_url.value === 'click') {
        await delete_drop_like({
            admin_id: store.user_info.user_id,
            blog_id: data.id,
        })
        like_url.value = 'hover';
        active.value = 'hover';
    } else {
        await add_drop_like({
            admin_id: store.user_info.user_id,
            blog_id: data.id, 
        })
        like_url.value = 'click';
        active.value = 'click';
    }
};

const look_blog = (id)=>{
    const { href } = router.resolve({path:"/lookOver",query:{id}});
    const route = window.location.origin + href;
    window.open(route, `blog_${id}`);
}
</script>

<style lang="less" scoped>
.community_box {
    width: 90%;
    padding: 0.1rem 0;
    border: 0.01rem solid @qls;
    border-radius: @dyj;
    margin: 0.1rem auto;

    .label {
        text-indent:.05rem;
        font-size: 0.24rem;
        font-weight: 900;
        cursor: pointer;
    }

    .abstract {
        width: 96%;
        margin: 0.1rem auto 0;
        font-size: 0.18rem;
        font-weight: 600;
    }

    .article-info-box {
        width: 96%;
        margin: 0.1rem auto 0;
        color: #555666;
        font-size: 0.16rem;
        display: flex;
        flex-wrap: wrap;
        > div {
            height: 0.2rem;
            display: flex;
            align-items: center;
        }

        .like {
            cursor: pointer;
            img {
                width: 0.16rem;
                height: 0.16rem;
                margin-right: 0.05rem;
            }
            .hover {
                color: #999aaa;
            }
            .click {
                color: #fc5531;
            }
        }

        .time,
        .browse {
            margin-left: 0.15rem;
            &:hover {
                color: #999aaa;
            }
        }

        .lable_class {
            flex: 100%;
            margin-left: 0;
            display: flex;
            justify-content: flex-end;
            > span {
                margin-left: 0.05rem;
                font-weight: 400;
                font-size: .18rem;
                &:hover {
                    color: #999aaa;
                }
            }
        }
    }
}
</style>
